<template>
  <div class="cententInfo">
    <!-- 编辑 -->
    <div class="buttonB">
      <img class="imgEditor" src="../../../assets/images/editor.png" alt="" />
      <div class="textTitle" @click="sendPage">编辑</div>
    </div>
    <!-- 左侧 -->
    <div class="oneLine">
      <div class="baseInfoLeft">
        <div class="baseInfo">
          <enterprise-base :dataInfo='dataInfo'></enterprise-base>
        </div>
        <div class="baseBottom">
          <security-info :dataInfo='dataInfo'></security-info>
        </div>
        <div class="enterpriseInfo">
          <institutions-info :dataInfo='dataInfo'></institutions-info>
        </div>
        <div class="additionalInfo">
          <additional-info :dataInfo='dataInfo'></additional-info>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="baseInfoRight">
        <div class="locationInfo">
          <location-distribution :dataInfo='dataInfo'></location-distribution>
        </div>
        <div class="securityInfo">
          <security-management :dataInfo='dataInfo'></security-management>
        </div>
        <div class="dangerousInfo">
          <dangerous-info :dataInfo='dataInfo'></dangerous-info>
        </div>
        <div class="enterpriseAdditionalInfo">
          <enterprise-additional-info :dataInfo='dataInfo'></enterprise-additional-info>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import AdditionalInfo from './component/additionalInfo.vue';
import DangerousInfo from "./component/dangerousInfo.vue";
import EnterpriseAdditionalInfo from './component/enterpriseAdditionalInfo.vue';
import EnterpriseBase from "./component/enterpriseBase.vue";
import InstitutionsInfo from "./component/institutionsInfo.vue";
import locationDistribution from "./component/locationDistribution.vue";
import SecurityInfo from "./component/securityInfo.vue";
import securityManagement from "./component/securityManagement.vue";
import { enterpriseNewListAPI } from "@/api/personnel/organization/index";
export default {
  components: {
    locationDistribution,
    securityManagement,
    EnterpriseBase,
    SecurityInfo,
    InstitutionsInfo,
    DangerousInfo,
    AdditionalInfo,
    EnterpriseAdditionalInfo,
  },
  data(){
    return {
      dataInfo:{}
    }
  },
  created(){
    this.getTableData()
  },
  methods:{
    sendPage(){
      // console.log('this',this.$router)
      this.$router.push('/editorPage')
    },
    // 获取列表数据
    getTableData() {
      enterpriseNewListAPI().then((res)=>{
        this.dataInfo = res.data
        
          console.log('res.data',res.data)

      })
    }
  },
};
</script>

<style lang="scss" scoped>
.cententInfo {
  overflow: auto;
}
.buttonB {
  width: 90px;
  height: 130px;
  background: #ffc108;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  margin-left: 94%;
  margin-bottom: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  .imgEditor {
    width: 14px;
    height: 14px;
  }
  .textTitle {
    color: white;
    margin-left: 5px;
  }
}
.oneLine {
  display: flex;
  .baseInfoLeft {
    // background: #ffc108;
    width: 49%;
    .baseInfo {
      // width: 836px;
      height: 1440px;
      box-shadow: 0 0 20px #979696;
      margin-bottom: 15px;
    }
  }

  .baseInfoRight {
    margin-left: 10px;
    width: 50%;
    // background: #ffc108;
    .locationInfo {
      // background: gold;
      // width: 805px;
      height: 810px;
      box-shadow: 0 0 20px #979696;
    }

    .securityInfo {
      margin-top: 10px;
      // background: green;
      // width: 805px;
      height: 870px;
      box-shadow: 0 0 20px #979696;
      margin-bottom: 15px;
    }
  }
  .baseBottom {
    // width: 836px;
    height: 236px;
    // background: red;
    margin-bottom: 15px;
    box-shadow: 0 0 20px #979696;
  }
  .enterpriseInfo {
    // width: 836px;
    height: 216px;
    // background: red;
    margin-bottom: 15px;
    box-shadow: 0 0 20px #979696;
  }
  .dangerousInfo {
    // width: 805px;
    height: 216px;
    // background: red;
    margin-bottom: 15px;
    box-shadow: 0 0 20px #979696;
  }
  .additionalInfo{
    // width: 836px;
    height: 592px;
    // background: red;
    margin-bottom: 15px;
    box-shadow: 0 0 20px #979696;
  }
  .enterpriseAdditionalInfo{
    // width: 805px;
    height: 592px;
    // background: red;
    margin-bottom: 15px;
    box-shadow: 0 0 20px #979696;
  }


}

</style>